<template>
  <view class="box">
    <view class="box1">
      <uv-tabs :list="list" @click="click"
        activeStyle="color: #1d8b8c;background-color: #fff;padding: 3% 30%;border-radius: 50rpx;" lineColor="#1d8b8c"
        :scrollable="false" inactiveStyle="color: #fff;">
      </uv-tabs>
    </view>
    <!-- 商城订单 -->
    <view class="box12" v-if="current == 0">
      <uv-tabs :list="list1" @click="click1" activeStyle="color: #008c8c" lineColor="#008c8c"></uv-tabs>
      <view class="box2" v-if="current1 == 0">
        <view class="box21" v-for="(item,index) in shopList" :key="item.id" @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{item.price1}}&nbsp;&nbsp;&nbsp;合计:￥{{item.price2}}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 1">
        <view class="box21" v-for="(item,index) in shopList" :key="item.id" v-show="item.text=='待支付'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{item.price1}}&nbsp;&nbsp;&nbsp;合计:￥{{item.price2}}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 2">
        <view class="box21" v-for="(item,index) in shopList" :key="item.id" v-show="item.text=='待发货'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{item.price1}}&nbsp;&nbsp;&nbsp;合计:￥{{item.price2}}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 3">
        <view class="box21" v-for="(item,index) in shopList" :key="item.id" v-show="item.text=='待自提'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{item.price1}}&nbsp;&nbsp;&nbsp;合计:￥{{item.price2}}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 4">
        <view class="box21" v-for="(item,index) in shopList" :key="item.id" v-show="item.text=='待收货'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{item.price1}}&nbsp;&nbsp;&nbsp;合计:￥{{item.price2}}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 5">
        <view class="box21" v-for="(item,index) in shopList" :key="item.id" v-show="item.text=='已完成'"
          @click="jump(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{item.price1}}&nbsp;&nbsp;&nbsp;合计:￥{{item.price2}}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 服务订单 -->
    <view class="box12" v-if="current == 1">
      <uv-tabs :list="list2" @click="click1" activeStyle="color: #008c8c" lineColor="#008c8c">
      </uv-tabs>
      <view class="box2" v-if="current1 == 0">
        <view class="box21" v-for="(item,index) in shopList1" :key="item.id" @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 1">
        <view class="box21" v-for="(item,index) in shopList1" :key="item.id" v-show="item.text=='待支付'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 2">
        <view class="box21" v-for="(item,index) in shopList1" :key="item.id" v-show="item.text=='待接单'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 3">
        <view class="box21" v-for="(item,index) in shopList1" :key="item.id" v-show="item.text=='已接单'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 4">
        <view class="box21" v-for="(item,index) in shopList1" :key="item.id" v-show="item.text=='服务中'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 5">
        <view class="box21" v-for="(item,index) in shopList1" :key="item.id" v-show="item.text=='已完成'"
          @click="jump1(item.url)">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">

            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const list = ref(
    [{
      name: '商城订单',
    }, {
      name: '服务订单',
    }]
  )
  const list1 = ref(
    [{
      name: '全部',
    }, {
      name: '待支付',
    }, {
      name: '待发货',
    }, {
      name: '待自提',
    }, {
      name: '待收货',
    }, {
      name: '已完成',
    }]
  )
  const list2 = ref(
    [{
      name: '全部',
    }, {
      name: '待支付',
    }, {
      name: '待接单',
    }, {
      name: '已接单',
    }, {
      name: '服务中',
    }, {
      name: '已完成',
    }]
  )
  const shopList = ref(
    [{
        id: 1,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "待支付",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/obligations/obligations'
      },
      {
        id: 2,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "待发货",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/daifahuo/daifahuo'
      },
      {
        id: 3,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "待自提",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/selfmentioned/selfmentioned'
      },
      {
        id: 4,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "待收货",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/receiving/receiving'
      },
      {
        id: 5,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "已完成",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/completed/completed'
      },
    ]
  )
  const shopList1 = ref(
    [{
        id: 1,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "待支付",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/obligations/obligations'
      },
      {
        id: 2,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "待接单",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/orderreceiving/orderreceiving'
      },
      {
        id: 3,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "已接单",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/daifuwu/daifuwu'
      },
      {
        id: 4,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "服务中",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/fuwuz/fuwuz'
      },
      {
        id: 5,
        image: "../../static/image/mein.jpg",
        name: '商品名称商品名称',
        text: "已完成",
        text1: "规格一",
        price: "125",
        price1: "0.00",
        price2: "120.00",
        url: '/pages/yiwancheng/yiwancheng'
      },
    ]
  )
  const current = ref(0)
  const click = ((item) => {
    // console.log('item', item);
    current.value = item.index
  })
  const current1 = ref(0)
  const click1 = ((item1) => {
    // console.log('item1', item);
    current1.value = item1.index
  })
  const jump = ((e) => {
    // console.log(e);
    uni.navigateTo({
      url: e
    });
  })
  const jump1 = ((a) => {
    // console.log(e);
    uni.navigateTo({
      url: a
    });
  })
</script>

<style lang="scss">
  @import url("order.scss")
</style>